<template>
  <div class="pl20 pr20 pb33">
    <div class="mt30 mb17">
      <span class="f18">在线设备</span>
      <div class="setSaveStrategyBtn fr">

        <el-button :disabled="isDisabled || group !== 'tenancy'" @click="SetSaveStrategyShow = true" type="primary" plain>
          <i class="iconfont mr5">&#xe684;</i>设置存储策略
        </el-button>
        <span class="ml5" :title="'当前无设备或设备已停用，无法设置存储策略'" v-if="isDisabled && group === 'tenancy'">
          <i class="iconfont clr_red">&#xe687;</i>
        </span>
        <span class="ml5" :title="'当前用户不是客户管理员，无法设置存储策略'" v-if="isDisabled && group !== 'tenancy'">
          <i class="iconfont clr_red">&#xe687;</i>
        </span>
      </div>
    </div>
    <div class="clear_fixed">
      <template v-for="item in saveDeviceList">
        <div v-if="item.device_type === 0 && item.device_category === 0" :key="item.id"
          class="w280 h330 fl mr30 mb30 bradius8 img_bshadow tc">
          <system-memory boxWidth="w220" boxHeight="h220" :boxText1="item.device_name"
            :boxText2="`${item.current_space || 0}/${item.total_space || 0}`" boxText1Font="18px Microsoft YaHei"
            boxText2Font="18px Microsoft YaHei" :borderDistance="5" :boxValue="item.account_for_box"
            style="margin: 10px auto 5px"></system-memory>
          <p class="mb15">盘符：{{ item.local_storage_path }}</p>
          <div class="btnBox">
            <el-button @click="viewDetail(item.id)" type="primary" size="small" plain><i
                class="iconfont mr5">&#xe66f;</i>查看</el-button>
            <el-button @click="modifyFn(item.id)" type="primary" size="small" plain><i
                class="iconfont mr5">&#xe670;</i>修改</el-button>
            <!--              <el-button v-if="item.device_type !== 1 && item.local_storage_path === 0" @click="switchFn(item.id, item.local_storage_path)" type="danger" plain><i class="iconfont mr5">&#xe67d;</i>停用</el-button>-->
            <!--              <el-button v-if="item.device_type !== 1 && item.local_storage_path === 1" @click="switchFn(item.id, item.local_storage_path)" type="success" plain><i class="iconfont mr5">&#xe67d;</i>启用</el-button>-->

            <el-tag v-if="item.local_is_stopped !== 1" type="success" class="ml10">已启用</el-tag>
            <el-tag v-if="item.local_is_stopped === 1" type="danger" class="ml10">已停用</el-tag>
          </div>
        </div>
        <div v-if="item.device_type === 1 && item.device_category === 0" :key="item.id"
          class="w280 h330 fl mr30 mb30 bradius8 img_bshadow tc">
          <div class="device_item">
            <img src="../../../assets/images/pacs/cloud.png" class="w180 h180" style="margin: 30px auto 20px">
            <p class="w100">{{ item.device_name }}</p>

          </div>
          <!-- <p v-if="item.oos_type === 0" class="mb15">亚马逊</p>
          <p v-if="item.oos_type === 1" class="mb15">阿里云</p> -->
          <p class="mb15">对象存储</p>

          <div class="btnBox">
            <el-button @click="viewDetail(item.id)" type="primary" size="small" plain><i
                class="iconfont mr5">&#xe66f;</i>查看</el-button>
            <el-button @click="modifyFn(item.id)" type="primary" size="small" plain><i
                class="iconfont mr5">&#xe670;</i>修改</el-button>
            <!--              <el-button v-if="item.device_type !== 1 && item.local_storage_path === 0" @click="switchFn(item.id, item.local_storage_path)" type="danger" plain><i class="iconfont mr5">&#xe67d;</i>停用</el-button>-->
            <!--              <el-button v-if="item.device_type !== 1 && item.local_storage_path === 1" @click="switchFn(item.id, item.local_storage_path)" type="success" plain><i class="iconfont mr5">&#xe67d;</i>启用</el-button>-->
            <el-tag v-if="item.oos_is_stopped !== 1" type="success" class="ml10">已启用</el-tag>
            <el-tag v-if="item.oos_is_stopped === 1" type="danger" class="ml10">已停用</el-tag>
          </div>
        </div>
      </template>
      <div class="w280 h330 fl mr30 bradius8 img_bshadow tc">
        <a @click.prevent="AddSaveDeviceFn(0)" class="db w100 h100 addBox cursor">
          <img src="../../../assets/images/pacs/add.png" class="w80 h80">
        </a>
      </div>
    </div>
    <div class="f18 mt30 mb20">近线设备</div>
    <div class="clear_fixed">
      <template v-for="item in saveDeviceList">
        <div v-if="item.device_type === 0 && item.device_category === 1" :key="item.id"
          class="w280 h330 fl mr30 mb30 bradius8 img_bshadow tc">
          <system-memory boxWidth="w220" boxHeight="h220" :boxText1="item.device_name"
            :boxText2="`${item.current_space || 0}/${item.total_space || 0}`" boxText1Font="18px Microsoft YaHei"
            boxText2Font="18px Microsoft YaHei" :borderDistance="5" :boxValue="item.account_for_box"
            style="margin: 10px auto 5px"></system-memory>
          <p class="mb15">盘符：{{ item.local_storage_path }}</p>
          <div class="btnBox">
            <el-button @click="viewDetail(item.id)" type="primary" size="small" plain><i
                class="iconfont mr5">&#xe66f;</i>查看</el-button>
            <el-button @click="modifyFn(item.id)" type="primary" size="small" plain><i
                class="iconfont mr5">&#xe670;</i>修改</el-button>
            <!--              <el-button v-if="item.device_type !== 1 && item.oos_is_stopped === 0" @click="switchFn(item.id, item.local_storage_path)" type="danger" plain><i class="iconfont mr5">&#xe67d;</i>停用</el-button>-->
            <!--              <el-button v-if="item.device_type !== 1 && item.oos_is_stopped === 1" @click="switchFn(item.id, item.local_storage_path)" type="success" plain><i class="iconfont mr5">&#xe67d;</i>启用</el-button>-->
            <el-tag v-if="item.local_is_stopped !== 1" type="success" class="ml10">已启用</el-tag>
            <el-tag v-if="item.local_is_stopped === 1" type="danger" class="ml10">已停用</el-tag>
          </div>
        </div>
        <div v-if="item.device_type === 1 && item.device_category === 1" :key="item.id"
          class="w280 h330 fl mr30 mb30 bradius8 img_bshadow tc">
          <div class="device_item">
            <img src="../../../assets/images/pacs/cloud.png" class="w180 h180" style="margin: 30px auto 20px">
            <p class="w100">{{ item.device_name }}</p>

          </div>
          <!-- <p v-if="item.oos_type === 0" class="mb15">亚马逊</p>
          <p v-if="item.oos_type === 1" class="mb15">阿里云</p> -->
          <p class="mb15">对象存储</p>

          <div class="btnBox">
            <el-button @click="viewDetail(item.id)" type="primary" size="small" plain><i
                class="iconfont mr5">&#xe66f;</i>查看</el-button>
            <el-button @click="modifyFn(item.id)" type="primary" size="small" plain><i
                class="iconfont mr5">&#xe670;</i>修改</el-button>
            <!--              <el-button v-if="item.device_type !== 1 && item.oos_is_stopped === 0" @click="switchFn(item.id, item.local_storage_path)" type="danger" plain><i class="iconfont mr5">&#xe67d;</i>停用</el-button>-->
            <!--              <el-button v-if="item.device_type !== 1 && item.oos_is_stopped === 1" @click="switchFn(item.id, item.local_storage_path)" type="success" plain><i class="iconfont mr5">&#xe67d;</i>启用</el-button>-->
            <el-tag v-if="item.oos_is_stopped !== 1" type="success" class="ml10">已启用</el-tag>
            <el-tag v-if="item.oos_is_stopped === 1" type="danger" class="ml10">已停用</el-tag>
          </div>
        </div>
      </template>
      <div class="w280 h330 fl mr30 bradius8 img_bshadow">
        <a @click.prevent="AddSaveDeviceFn(1)" class="db w100 h100 addBox cursor">
          <img src="../../../assets/images/pacs/add.png" class="w80 h80">
        </a>
      </div>
    </div>
    <set-save-strategy :SetSaveStrategyShow="SetSaveStrategyShow" :hasObjectStorage="hasObjectStorage"
      :onlineObjectStorage="onlineObjectStorage" @SetSaveStrategyClose="SetSaveStrategyClose" />
    <add-save-device :AddSaveDeviceShow="AddSaveDeviceShow" :rowId="rowId" :dialogType="dialogType"
      :device_category="deviceCategory" :tenantOptions="tenantOptions" :institutionList="institutionList"
      @AddSaveDeviceClose="AddSaveDeviceClose" @refreshList="getSaveDeviceList" />
  </div>
</template>

<script>
import SystemMemory from '@/components/pacs/systemMemory' // 水球
import SetSaveStrategy from '../../../components/pacs/commonDialog/SetSaveStrategy' // 设置存储策略 弹窗
import AddSaveDevice from '../../../components/pacs/commonDialog/AddSaveDevice' // 新增存储设备 弹窗
import { mapGetters } from 'vuex'

export default {
  name: 'MemoryDeviceConfig',
  data() {
    return {
      SetSaveStrategyShow: false,
      AddSaveDeviceShow: false,
      saveDeviceList: [],
      rowId: 0,
      dialogType: '', // 弹窗的类型: 新增add 查看view 修改modify,
      deviceCategory: '',
      tenantOptions: [],
      institutionList: [],
      isDisabled: false,
      hasObjectStorage: false,
      onlineObjectStorage: false,
    }
  },
  computed: {
    ...mapGetters(['group'])
  },
  methods: {
    SetSaveStrategyClose() {
      this.SetSaveStrategyShow = false
    },
    AddSaveDeviceClose(openStrategy) {
      // console.log('是否需要打开存储策略设置',openStrategy);
      this.AddSaveDeviceShow = false
    },
    async getSaveDeviceList() {


      const loading = this.$loading({
        lock: true,
        text: '加载中，请稍后',
        spinner: 'el-icon-loading',
        background: 'hsla(0, 0%, 100%, .9)',
        customClass: this.group === 'tenancy' ? (sessionStorage.getItem('open') === 'true' ? 'ml64' : 'ml223') : ''
      });
      const res = await this.$pacsApi.pacsApi.getSaveDeviceList()

      const { code, data, msg } = res
      if (code === 0) {
        this.saveDeviceList = data
        //记录是否有对象存储--设置存储策略时需要用

        this.hasObjectStorage = this.saveDeviceList.some(item => item.device_type === 1 && item.oos_is_stopped !== 1)
        this.onlineObjectStorage = this.saveDeviceList.some(item => item.device_type === 1 && item.device_category === 0 && item.oos_is_stopped !== 1)
        this.saveDeviceList.forEach(item => {
          if (item.current_space && item.total_space) {
            item.account_for_box = Math.round((this.getAccount(item.current_space) / this.getAccount(item.total_space)) * 100) / 100
          } else {
            item.account_for_box = 0
          }
        })
        const arr = this.saveDeviceList.filter(item => {
          return item.local_is_stopped === 1
        })
        if (this.saveDeviceList.length) {
          this.isDisabled = this.saveDeviceList.length === arr.length ? true : false
        } else {
          this.isDisabled = true
        }

        loading.close()
      } else {
        this.$message.error(msg)
        loading.close()
      }
    },
    // 100G / 10T
    getAccount(bytes) {
      const sizes = ['B', 'K', 'M', 'G', 'T']
      const k = 1024
      let num = 0
      sizes.forEach((item, index) => {
        if (bytes.includes(item)) {
          num = bytes.slice(0, bytes.length - 1) * Math.pow(k, index)
        }
      })
      return num
    },
    // async deleteSaveDevice(id) {
    //   let res = await this.$pacsApi.pacsApi.deleteSaveDevice(id)
    //   let { code, msg } = res
    //   if(code === 0) {
    //     this.$message({
    //       type: 'success',
    //       message: msg
    //     })
    //     // 刷新列表
    //     this.getSaveDeviceList()
    //   }
    // },
    // deleteFn(id) {
    //   this.$confirm('确定停用存储设备?', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     this.deleteSaveDevice(id)
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消'
    //     });
    //   });
    // },
    async switchSaveDeviceState(data, id) {
      const res = await this.$pacsApi.pacsApi.switchSaveDeviceState(data, id)
      const { code, msg } = res
      if (code === 0) {
        this.$message({
          type: 'success',
          message: msg
        })
        // 刷新列表
        this.getSaveDeviceList()
      }
    },
    switchFn(id, state) {
      let tip = ''
      let obj = ''
      if (state === 1) {
        tip = '启用'
        obj = {
          is_stopped: 0
        }
      } else {
        tip = '停用'
        obj = {
          is_stopped: 1
        }
      }
      this.$confirm(`确定${tip}存储设备?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.switchSaveDeviceState(obj, id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    viewDetail(id) { // 查看
      this.rowId = id
      this.dialogType = 'view'
      this.AddSaveDeviceShow = true
    },
    modifyFn(id) { // 修改
      this.rowId = id
      this.dialogType = 'modify'
      this.AddSaveDeviceShow = true
    },
    AddSaveDeviceFn(deviceCategory) { // 新增
      this.rowId = 0
      this.dialogType = 'add'
      this.AddSaveDeviceShow = true
      this.deviceCategory = deviceCategory
    },
    async getTenantInfo() {
      let res = await this.$pacsApi.pacsApi.getTenantInfo()
      let { code, data } = res
      if (code === 0) {
        this.tenantOptions.push(data)
      }
    },
    async getInstitutionsList() {
      let res = await this.$pacsApi.pacsApi.getInstitutionsList()
      let { code, data } = res
      if (code === 0) {
        this.institutionList = data
      }
    }
  },
  mounted() {
    if (this.$route.params['SetSaveStrategyShow'] && this.$route.params['SetSaveStrategyShow'] === 'open') {
      this.SetSaveStrategyShow = true
    }
    this.getSaveDeviceList()
    // this.getTenantInfo() // 获取客户信息
    // this.getInstitutionsList() // 获取机构列表
  },
  components: {
    SystemMemory,
    SetSaveStrategy,
    AddSaveDevice
  }
}
</script>

<style lang="less" scoped>
.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.device_item {
  position: relative;

  p {
    position: absolute;
    margin: -70px;
    left:167px;
    width: 80px;
  }
}

.object_device {
  box-sizing: border-box;
  border-radius: 50%;
  background-image: linear-gradient(rgba(107, 140, 250, 1), rgba(57, 186, 242, 1));
  padding: 3px;

  &_content {
    background-color: white;
    width: 100%;
    height: 100%;
    border-radius: 50%;

  }

  img {
    width: 100px;
    height: 100px;
    object-fit: cover;
  }

  // position: relative;
  // // width: 180px;
  // // height: 180px;

  // p{
  //   position: absolute;

  //   bottom: 10px;
  //   text-align: center;
  // }
}

.setSaveStrategyBtn {
  margin-top: -7px;

  button {
    width: 130px;
    height: 40px;
    background-color: #fff;
    border: 1px solid #DCDFE6;
    padding: 0;
  }
}

.btnBox {
  margin: 0 auto;

  button {
    /*width: 70px;*/
    /*height: 40px;*/
    background-color: #fff;
    border: 1px solid #DCDFE6;
    /*padding: 0;*/
  }
}

.addBox {
  position: relative;

  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.ml223 {
  margin-left: 223px;
}

.ml64 {
  margin-left: 64px;
}
</style>
